<template>
  <header>
    <div class="banxin tanxin head">
      <div class="head_l">
        <h1></h1>
      </div>
      <ul class="tanxin">
        <router-link to="/" tag="li">发现音乐</router-link>
        <router-link to="/mymuse" tag="li">我的音乐</router-link>
        <li>关注</li>
        <li>商城</li>
        <li>音乐人</li>
        <li>下载客户端</li>
      </ul>
      <div class="head_r">
        <ul>
          <li>
            <input
              type="text"
              placeholder="音乐/视频/电台/用户"
              v-model="sousuo"
              @input="inputFn"
              @mousedown="mousFn(true)"
            />
          </li>
          <li v-show="isShow" class="li2" @mouseleave="mousFn(false)">
            <div class="top">搜"{{ sousuo }}"在相关用户</div>
            <div class="sousuo tanxin">
              <div class="sousuo_l">
                <p>单曲</p>
              </div>
              <div class="sousuo_r">
                <p
                  class="ellipsis"
                  v-for="(item, index) in souslist"
                  :key="index"
                >
                  {{ item.name }}
                </p>
              </div>
            </div>
          </li>
        </ul>

        <div class="czz">创作者中心</div>

        <span v-if="$store.state.isGoLogin" @click="oplogin">登录</span>
        <span class="touxiang" v-else>
          <img :src="$store.state.avatarUrl" alt="" />
        </span>
      </div>
    </div>
  </header>
</template>

<script>
import { Sousuo } from "@/request/api";
export default {
  data() {
    return {
      sousuo: null,
      souslist: [],
      isShow: false,
    };
  },
  methods: {
    inputFn() {
      Sousuo({ keywords: this.sousuo, limit: 4, type: 1 }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.souslist = res.data.result.songs;
        }
      });
    },
    oplogin() {
      this.$store.commit("ChanneLogin", true);
    },
    mousFn(show) {
      this.isShow = show;
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";

header {
  background-color: @black;

  .head {
    .head_l {
      height: 70px;
      display: flex;
      overflow: hidden;
      h1 {
        width: 169px;
        height: 69px;
        background-image: url("../assets/images/topbar.png");
        background-repeat: no-repeat;
        background-position: 0 0;
      }
    }
    ul {
      justify-content: space-between;
      li {
        height: 70px;
        color: #fff;
        margin-right: 20px;
        cursor: pointer;
        line-height: 70px;
        padding-right: 10px;
        padding-left: 10px;
        box-sizing: border-box;
      }
      li:hover {
        background-color: #000;
        border-bottom: 5px solid @red;
      }
    }
    .head_r {
      display: flex;
      color: #fff;
      ul {
        position: relative;
        li {
          &:hover {
            background-color: @black;
            border-bottom: none;
          }
          input {
            width: 160px;
            height: 35px;
            border-radius: 20px;
            margin: auto;
            text-indent: 1em;
            outline-style: none;
          }
        }
        .li2 {
          width: 200px;
          height: 300px;
          background-color: #fff;
          position: absolute;
          z-index: 99999;
          color: #000;
          &:hover {
            background-color: #fff;
            border-bottom: none;
          }
          .top {
            width: 100%;
            border-bottom: 1px solid #ccc;
          }
          .sousuo {
            justify-content: flex-start;
            height: 100%;
            width: 100%;
            .sousuo_l {
              width: 50px;
              border-right: 1px solid #ccc;
              p {
                display: block;
                width: 50px;
              }
            }
            .sousuo_r {
              p {
                padding-left: 10px;
                width: 140px;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
              }
            }
          }
        }
      }

      .czz {
        width: 100px;
        height: 35px;
        text-align: center;
        margin-left: 15px;
        line-height: 35px;
        border-radius: 20px;
        box-sizing: border-box;
        margin-top: 17px;
        &:hover {
          border: 1px solid #fff;
        }
      }
      span {
        margin: auto;
        margin-left: 20px;
        color: #ccc;
        cursor: pointer;
      }
      .touxiang {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>